<style>
    .ly-pop-confirm-content i {
        position: absolute;
        font-size: 20px;
    }

    .ly-pop-confirm-content p {
        padding-left: 26px;
    }

    .ly-pop-confirm-content i.el-icon-info {
        color: #909399;
    }

    .ly-pop-confirm-content i.el-icon-warning {
        color: #F5B93D;
    }

    .ly-pop-confirm-content i.el-icon-success {
        color: #13CE66;
    }
</style>
<template>
    <el-popover
            :placement="placement"
            :width="width"
            v-model="visible">
        <div class="ly-pop-confirm-content">
            <i :class="['el-icon-'+type]"></i>
            <p>{{title}}</p>
        </div>
        <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="cancel">{{cancelText}}</el-button>
            <el-button type="primary" size="mini" @click="confirm">{{yesText}}</el-button>
        </div>
        <slot slot="reference"></slot>
    </el-popover>
</template>
<script>
    Rap.define('', '', function () {
        return {
            name: 'ly-pop-confirm',
            props: {
                placement: {
                    type: String,
                    'default': 'top'
                },
                width: {
                    'default': '280'
                },
                title: String,
                yesText: {
                    'default': '确定'
                }, cancelText: {
                    'default': '取消'
                },
                type: {
                    'default': 'info'
                }
            }, data: function () {
                return {
                    visible: false
                }
            }, methods: {
                cancel: function () {
                    this.visible=false;
                    this.$emit('cancel');
                }, confirm: function () {
                    this.visible=false;
                    this.$emit('confirm');
                }
            }
        }
    });
</script>
